<template>
  <div class="box" v-loading="loading">
    <div class="f1">
      <div class="f1_content">
        <div class="goHome" @click="goHome">
          <img src="@/assets/flow/首页.png" alt="" />返回主页
        </div>

        <ul>
          <li v-for="(item, index) in list" :key="item.num">
            <h6>
              <span>{{ item.num }} </span>{{ item.str }}
            </h6>
            <template v-if="item.num == '01'">
              <img class="quan" src="@/assets/home/组71.png" alt="" />
              <img class="line" src="@/assets/home/组72.png" alt="" />
            </template>
            <template v-else>
              <img class="quan" src="@/assets/home/组71-2.png" alt="" />
              <img
                class="line"
                v-show="index !== list.length - 1"
                src="@/assets/home/组74.png"
                alt=""
              />
            </template>
          </li>
        </ul>
      </div>
    </div>
    <div class="f2">
      <div class="content">
        <div class="title">
          <h6></h6>
          企业信息
        </div>
        <!-- 表单 -->
        <div class="f2_content">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="160px"
            class="demo-ruleForm"
          >
            <el-form-item label="企业名称" prop="entname">
              <el-input v-model="ruleForm.entname" @blur="entnames"></el-input>
              <p v-show="showEntname" class="error">请输入企业名称</p>
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="creditno">
              <el-input
                v-model="ruleForm.creditno"
                @blur="creditnos"
              ></el-input>
              <p v-show="showCreditno" class="error">请输入统一信用代码</p>
            </el-form-item>
            <el-form-item label="注册省份" prop="prov">
              <el-input @blur="provs" v-model="ruleForm.prov"></el-input>
              <p v-show="showProv" class="error">请输入注册省份</p>
            </el-form-item>
            <el-form-item class="aaaa" label="实缴资本" prop="realcapital">
              <span
                style="
                  position: absolute;
                  right: 333px;
                  top: 0px;
                  z-index: 999;
                  font-size: 15px;
                  font-weight: 400;
                  color: #333333;
                "
              >
                万元
              </span>
              <el-input
                style="width: 355px"
                v-model="addform.realcapital"
                @focus="
                  () => {
                    this.addform.realcapital = remoney(
                      this.addform.realcapital
                    );
                  }
                "
                @blur="realcapitals"
              >
              </el-input>
              <el-select v-model="ruleForm.unit" placeholder="请选择">
                <el-option label="人民币" value="人民币"></el-option>
                <el-option label="美元" value="美元"></el-option>
                <el-option label="欧元" value="欧元"></el-option>
                <el-option label="英镑" value="英镑"></el-option>
                <el-option label="日元" value="日元"></el-option>
                <el-option label="港币" value="港币"></el-option>
              </el-select>
              <p v-show="showRealcapital" class="error">请输入实缴资本</p>
            </el-form-item>
            <el-form-item label="公司介绍" prop="introduction">
              <!-- <el-input
                type="textarea"
                rows="3"
                v-model="ruleForm.introduction"
              ></el-input> -->
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="ruleForm.introduction"
                maxlength="500"
                rows="6"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </el-form>
          <!-- 营业执照 -->
          <div class="license license1" style="">
            <span class="aaa11"
              ><span style="color: #f25757">*</span>营业执照
            </span>
            <!-- 图片上传 -->
            <el-upload
              action="#"
              class="permit permit1 el-upload--picture-card"
              list-type="picture-card"
              :auto-upload="false"
              accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
              :on-change="handleChangeBusiness"
              :http-request="uploadFileBusiness"
              :file-list="yyzz"
              ref="pictureUpload1"
            >
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleRemove1(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <div class="license-right1">
              <div>
                <p>说明：</p>
                <p>1.上传文件大小不超过5M；</p>
                <p>2.仅支持jpeg、png、jpg格式文件；</p>
                <p style="color: #f00">3.需加盖公章。</p>
              </div>
            </div>
          </div>
          <!-- 企业图标 -->
          <div class="license license1" style="">
            <span class="aaa11">企业图标 </span>
            <!-- 图片上传 -->
            <el-upload
              action="#"
              class="permit permit2 el-upload--picture-card"
              list-type="picture-card"
              :auto-upload="false"
              accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
              :on-change="handleChangeBusinessQytb"
              :http-request="uploadFileBusiness"
              :file-list="qytb"
              ref="pictureUpload2"
            >
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleRemove2(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <div class="license-right1">
              <div>
                <p>说明：</p>
                <p>1.上传文件大小不超过5M；</p>
                <p>2.仅支持jpeg、png、jpg格式文件；</p>
                <p>3.用于企业展示，可上传Logo或自定义图标。</p>
              </div>
            </div>
          </div>
          <!-- 组织架构图 -->
          <div class="license license1" style="">
            <span class="aaa11">组织架构图 </span>
            <!-- 图片上传 -->
            <el-upload
              action="#"
              class="permit permit3 el-upload--picture-card"
              list-type="picture-card"
              :auto-upload="false"
              accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
              :on-change="handleChangeBusinessZzjgt"
              :http-request="uploadFileBusiness"
              :file-list="zzjgt"
              ref="pictureUpload3"
            >
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleRemove3(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <div class="license-right1">
              <div>
                <p>说明：</p>
                <p>1.上传文件大小不超过5M；</p>
                <p>2.仅支持jpeg、png、jpg格式文件。</p>
              </div>
            </div>
          </div>
          <div class="license license1" style="">
            <span class="aaa11">办公环境照片 </span>
            <el-upload
              :on-exceed="max"
              multiple
              action="#"
              class="upload-demo"
              :auto-upload="false"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-change="handleChangeBusinessBghjzp"
              :http-request="uploadFileBusiness"
              :file-list="bghj"
              :limit="limit"
              list-type="picture"
              accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                （1.上传文件大小不超过5M；2.仅支持jpeg、png、jpg、pdf格式文件；3.最多上传五张图片。）
              </div>
            </el-upload>
          </div>
        </div>

        <div class="title">
          <h6></h6>
          企业信息
        </div>
        <!-- 表单 -->
        <div class="f2_content">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="160px"
            class="demo-ruleForm"
          >
            <el-form-item label="法定代表人姓名" prop="legalname">
              <el-input v-model="ruleForm.legalname"></el-input>
            </el-form-item>
            <el-form-item label="法定代表人手机号" prop="legalphone">
              <el-input
                @blur="appFincerPhone(ruleForm.legalphone)"
                v-model="ruleForm.legalphone"
              ></el-input>
              <p v-show="showPhone" class="error">请输入正确的手机号</p>
            </el-form-item>
            <el-form-item label="法定代表人证件类型" prop="legalcredentialtype">
              <el-radio-group
                @input="aaaaaa1"
                v-model="ruleForm.legalcredentialtype"
              >
                <el-radio label="身份证"></el-radio>
                <el-radio label="护照"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="ruleForm.legalcredentialtype == '身份证'"
              label="法定代表人证件号码"
              prop="legalcredentialnumber"
            >
              <el-input
                @blur="appFincerNo(ruleForm.legalcredentialnumber)"
                v-model="ruleForm.legalcredentialnumber"
              ></el-input>
              <p v-show="show" class="error">请输入正确的身份证号</p>
            </el-form-item>
            <el-form-item
              v-if="ruleForm.legalcredentialtype == '护照'"
              label="法定代表人证件号码"
              prop="legalcredentialnumber"
            >
              <el-input
                @blur="checkPassport(ruleForm.legalcredentialnumber)"
                v-model="ruleForm.legalcredentialnumber"
              ></el-input>
              <p v-show="show1" class="error">请输入正确的护照号</p>
            </el-form-item>
          </el-form>
          <!--身份证  -->
          <div class="license license1" style="margin-left: 3px">
            <span class="aaa11"
              ><span style="color: #f25757">*</span>证件上传
            </span>
            <!-- 正面 -->
            <!-- 图片上传 -->
            <el-upload
              action="#"
              class="permit el-upload--picture-card permit-front"
              list-type="picture-card"
              :auto-upload="false"
              accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
              :on-change="handleChangeFront"
              :http-request="uploadFileFront"
              :file-list="sfzzm"
              ref="pictureUpload4"
            >
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleRemove4(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <!-- 反面 -->
            <!-- 图片上传 -->
            <el-upload
              action="#"
              class="permit el-upload--picture-card permit-reverse"
              list-type="picture-card"
              :auto-upload="false"
              accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
              :on-change="handleChangeReverse"
              :http-request="uploadFileReverse"
              :file-list="sfzfm"
              ref="pictureUpload5"
            >
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleRemove5(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <div class="license-right1">
              <div>
                <p>说明：</p>
                <p>1.上传文件大小不超过5M；</p>
                <p>2.仅支持jpeg、png、jpg格式文件；</p>
                <p style="color: #f00">3.需加盖公章。</p>
              </div>
            </div>
          </div>
        </div>

        <div class="btn">
          <button class="last" @click="lastStep">上一步</button>
          <button class="next" :disabled="isLock" @click="nextStep">
            下一步
          </button>

          <!-- <button @click="upload(url)">下一步</button> -->
        </div>
      </div>
      <!-- 弹窗 -->
      <el-dialog :visible.sync="dialogVisible" v-viewer>
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { info, files } from "@/api/authentication/index.js";
import axios from "axios";
import Cookies from "js-cookie";
import { baseURL } from "@/utils/http";
export default {
  data() {
    return {
      index: "",
      filepath: [],
      showEntname: false,
      showCreditno: false,
      showProv: false,
      showRealcapital: false,
      loading: false,
      list: [
        {
          num: "01",
          str: "基本信息",
        },
        {
          num: "02",
          str: "资质信息",
        },
        {
          num: "03",
          str: "财务信息",
        },
        {
          num: "04",
          str: "信用信息",
        },
        {
          num: "05",
          str: "授权信息采集",
        },
        {
          num: "06",
          str: "预览并提交",
        },
      ],
      businessid: "",
      figure: 5,
      status: false,
      type: "",
      isLock: false,
      showPhone: false,
      show: false,
      show1: false,
      limit: 5,
      fileListBusiness: [], //营业执照
      yyzz: [],
      fileListQytb: [], //企业图标
      qytb: [],
      fileListZzjgt: [], //组织架构图
      zzjgt: [],
      fileListFront: [], //身份证正面
      sfzzm: [],
      fileListReverse: [], //身份证反面
      sfzfm: [],
      dialogVisible: false,
      dialogImageUrl: "", //查看缩略图
      fileList: [],
      bghj: [],
      ruleForm: {
        id: "",
        entname: "",
        creditno: "",
        prov: "",
        realcapital: "",
        introduction: "",
        legalname: "",
        legalphone: "",
        legalcredentialtype: "身份证",
        legalcredentialnumber: "",
        unit: "人民币", //资本单位
      },
      addform: {
        realcapital: "",
      },
      rules: {
        entname: [{ required: true, message: " ", trigger: "blur" }],
        creditno: [{ required: true, message: " ", trigger: "blur" }],
        prov: [{ required: true, message: " ", trigger: "blur" }],
        realcapital: [{ required: true, message: " ", trigger: "blur" }],
        introduction: [
          { required: true, message: "请输入公司介绍", trigger: "blur" },
        ],
        legalname: [
          { required: true, message: "请输入法定代表人姓名", trigger: "blur" },
        ],
        legalphone: [
          {
            required: true,
            message: " ",
            trigger: "blur",
          },
        ],
        legalcredentialtype: [
          {
            required: true,
            message: "请输入法定代表人证件号码",
            trigger: "blur",
          },
        ],
        legalcredentialnumber: [
          {
            required: true,
            message: " ",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    document.documentElement.scrollTop = 0;
    this.ruleForm.id = sessionStorage.getItem("rzid");
    this.type = localStorage.getItem("type");
    this.businessid = localStorage.getItem("businessid");
    localStorage.getItem("businessid");
    this.getInfo();
    this.getFiles();
  },
  methods: {
    goHome() {
      this.$router.push("/");
    },
    upload(url, another, oldfilename) {
      let _this = this;
      axios({
        method: "get",
        url: url, // 替换为文件的URL
        responseType: "blob", // 设置响应类型为Blob
      })
        .then(async function (response) {
          if (response.status === 200) {
            const blobData = response.data; // 获取Blob数据
            // 现在你可以对Blob数据执行任何需要的操作，例如保存它或者展示它
            // console.log("成功获取Blob数据:", blobData);
            if (!another) {
              another = [];
            }
            let f = _this.blobToFile(blobData, oldfilename);
            let e = {
              name: oldfilename,
              percentage: 0,
              raw: f,
              size: blobData.size,
              status: "ready",
              uid: "",
              url: url,
            };
            another.push(e);
          } else {
            console.error("获取文件失败");
          }
        })
        .catch(function (error) {
          console.error("发生错误:", error);
        });
      return another;
    },
    blobToFile(blob, fileName, lastModified) {
      const options = {
        type: blob.type,
        lastModified: lastModified || Date.now(),
      };

      // 创建一个新的File对象
      try {
        return new File([blob], fileName, options);
      } catch (e) {
        // 在一些浏览器中，File构造函数可能不可用，因此我们可以使用Blob作为备选方案
        const blobWithFileProperties = new Blob([blob], options);
        blobWithFileProperties.name = fileName;
        return blobWithFileProperties;
      }
    },
    entnames(e) {
      if (e.target.value == "") {
        this.showEntname = true;
      } else {
        this.showEntname = false;
      }
    },
    creditnos(e) {
      if (e.target.value == "") {
        this.showCreditno = true;
      } else {
        this.showCreditno = false;
      }
    },
    realcapitals(e) {
      this.showRealcapital = false;
      this.ruleForm.realcapital = this.addform.realcapital;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.realcapital = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.addform.realcapital = this.fmoney(this.addform.realcapital);
      let value = Number(this.ruleForm.realcapital);
      if (this.ruleForm.realcapital == "") return;
      this.ruleForm.realcapital = value.toFixed(2);
      if (isNaN(this.ruleForm.realcapital)) {
        this.addform.realcapital = "";
        this.showRealcapital = true;
      }
    },
    provs(e) {
      if (e.target.value == "") {
        this.showProv = true;
      } else {
        this.showProv = false;
      }
    },
    // --------------------------------------------------------------------
    // 获取信息
    getInfo() {
      let id = this.ruleForm.id;
      if (id == "") return;
      info(this.ruleForm.id).then((res) => {
        if (res.msg == "操作成功") {
          if (!res.data) return;
          this.ruleForm = res.data;
          if (!res.data.unit) {
            this.ruleForm.unit = "人民币";
          }
          if (!res.data.legalcredentialtype) {
            this.ruleForm.legalcredentialtype = "身份证";
          }
          this.addform.realcapital = res.data.realcapital;
        }
      });
    },
    // 获取文件
    getFiles() {
      let id = this.ruleForm.id;
      if (id == "") return;
      files(id).then((res) => {
        if (res.msg == "操作成功") {
          let data = res.data;
          this.filepath = data;
          this.filepath.forEach((item) => {
            if (item.objecttype == "ZZJGT") {
              this.zzjgt.push({ url: item.filepath });
            } else if (item.objecttype == "YYZZ") {
              let a = this.upload(item.filepath, this.yyzz, item.newfilename);
              this.fileListBusiness = a;
            } else if (item.objecttype == "LOGO") {
              this.qytb.push({ url: item.filepath });
            } else if (item.objecttype == "SFZZ") {
              // this.sfzzm.push({ url: item.filepath });
              let a = this.upload(item.filepath, this.sfzzm, item.newfilename);
              this.fileListFront = a;
            } else if (item.objecttype == "SFZF") {
              // this.sfzfm.push({ url: item.filepath });
              let a = this.upload(item.filepath, this.sfzfm, item.newfilename);
              this.fileListReverse = a;
            } else if (item.objecttype == "BGHJ") {
              this.bghj.push({ url: item.filepath });
            }
          });
        }
      });
    },
    // 超出个数限制
    max() {
      this.$Message.error("最多上传五张图片");
    },
    aaaaaa1() {
      this.ruleForm.legalcredentialnumber = "";
      this.show = false;
      this.show1 = false;
    },
    // 上一步
    lastStep() {
      this.$router.push("/selectType");
    },
    // 下一步
    nextStep() {
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 5000);
      let {
        entname,
        creditno,
        prov,
        realcapital,
        introduction,
        legalname,
        legalphone,
        legalcredentialtype,
        legalcredentialnumber,
        id,
        unit,
      } = this.ruleForm;
      let businessid = this.businessid;
      let type = this.type;
      if (
        entname.trim() == "" ||
        creditno.trim() == "" ||
        prov.trim() == "" ||
        realcapital.trim() == "" ||
        introduction.trim() == "" ||
        legalname.trim() == "" ||
        legalphone.trim() == "" ||
        legalcredentialnumber.trim() == "" ||
        this.fileListBusiness.length == 0 ||
        this.fileListFront.length == 0 ||
        this.fileListReverse.length == 0
      ) {
        this.$Message.error("请输入内容");
        return;
      }

      if (this.showPhone) return this.$Message.error("请输入正确的手机号");
      if (this.show || this.show1)
        return this.$Message.error("请输入正确的证件号");
      let data = {
        entname: entname,
        creditno: creditno,
        prov: prov,
        realcapital: realcapital,
        introduction: introduction,
        legalname: legalname,
        legalphone: legalphone,
        legalcredentialtype: legalcredentialtype,
        legalcredentialnumber: legalcredentialnumber,
        unit: unit,
        type: type,
        customerid: businessid,
        id: id,
        license: [],
        logo: [],
        framework: [],
        offices: [],
        legalFront: [],
        legalBack: [],
      };
      var patt1 = /[\u4e00-\u9fa5]+/g;
      this.filepath.forEach((item) => {
        if (item.newfilename.match(patt1).join("") == "营业执照") {
          data.license.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        } else if (item.newfilename.match(patt1).join("") == "企业图标") {
          data.logo.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        } else if (item.newfilename.match(patt1).join("") == "组织架构图") {
          data.framework.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        } else if (item.newfilename.match(patt1).join("") == "办公环境照片") {
          data.offices.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        } else if (item.newfilename.match(patt1).join("") == "法人身份证正面") {
          data.legalFront.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        } else if (
          item.newfilename.match(patt1).join("") == "法人身份证反面" ||
          item.newfilename.match(patt1).join("") == "法人省份证反面"
        ) {
          data.legalBack.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        }
      });
      let token = localStorage.getItem("token");
      let url = baseURL + `/credit/auth/one`;
      axios
        .post(url, data, {
          headers: { "Content-Type": "application/json", "x-auth": token },
        })
        .then((res) => {
          if (res.data.msg == "操作成功") {
            sessionStorage.setItem("rzid", res.data.data.rzId);
            this.loading = false;
            this.$router.push("/flow2");
            return;
          }
          this.$Message.error("操作失败");
        });
    },
    uploadingFile(fileList, newfilename) {
      let formData = new FormData();
      fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      let token = localStorage.getItem("token");
      let url = baseURL + `/credit/auth/saveFile?newfilename=${newfilename}`;
      axios
        .post(url, formData, {
          headers: { "Content-Type": "multipart/form-data", "x-auth": token },
        })
        .then((res) => {
          if (res.data.msg == "操作成功") {
            for (let i = 0; i < res.data.data.length; i++) {
              this.filepath.push({
                newfilename: res.data.data[i].newfilename,
                filepath: res.data.data[i].filepath,
                serialno: res.data.data[i].serialno,
                uid: fileList[i].uid,
              });
            }
            return;
          }
          this.$Message.error("操作失败");
        });
    },
    delFile(file) {
      let index = "";
      for (let i = 0; i < this.filepath.length; i++) {
        if (
          this.filepath[i].filepath == file.url ||
          this.filepath[i].uid == file.uid
        ) {
          index = i;
          this.filepath.splice(index, 1);
          return;
        }
      }
    },
    // 办公环境
    handleChangeBusinessBghjzp(file, fileList) {
      if (file.name.split(".")[1] == "pdf") {
        this.$Message.error("仅支持jpeg、png、jpg格式文件");
      }
      this.fileList = fileList;
      let a = [];
      a.push(file);
      this.uploadingFile(a, "办公环境照片");
    },
    handleRemove(file, fileList) {
      this.delFile(file);
    },
    handlePreview(file) {},
    // 营业执照------------------------------------------------
    handleChangeBusiness(file, fileList) {
      this.fileListBusiness = fileList[0].raw;
      this.uploadingFile(fileList, "营业执照");
    },
    //自定义上传文件
    uploadFileBusiness(file) {
      return;
    },
    // 删除营业执照缩略图
    handleRemove1(file) {
      this.$refs.pictureUpload1.handleRemove(file);
      this.delFile(file);
      this.fileListBusiness = [];
    },
    // 企业图标
    handleChangeBusinessQytb(file, fileList) {
      this.fileListQytb = fileList[0].raw;
      this.uploadingFile(fileList, "企业图标");
    },
    // 删除企业图标缩略图
    handleRemove2(file) {
      this.$refs.pictureUpload2.handleRemove(file);
      this.delFile(file);
      this.fileListQytb = [];
    },
    // 组织架构图
    handleChangeBusinessZzjgt(file, fileList) {
      this.fileListZzjgt = fileList[0].raw;
      this.delFile(file);
      this.uploadingFile(fileList, "组织架构图");
    },
    // 删除组织架构图缩略图
    handleRemove3(file) {
      this.$refs.pictureUpload3.handleRemove(file);
      this.delFile(file);
      this.fileListZzjgt = [];
    },

    // 身份证正面-----------------------------------------------------
    handleChangeFront(file, fileList) {
      this.fileListFront = fileList[0].raw;
      this.uploadingFile(fileList, "法人身份证正面");
    },
    uploadFileFront(file) {
      return;
    },
    // 删除
    handleRemove4(file) {
      this.$refs.pictureUpload4.handleRemove(file);
      this.delFile(file);
      this.fileListFront = [];
    },
    // 反面——————————————————————————————————————————————————————————
    handleChangeReverse(file, fileList) {
      this.fileListReverse = fileList[0].raw;
      this.uploadingFile(fileList, "法人身份证反面");
    },
    uploadFileReverse(file) {
      return;
    },
    // 删除
    handleRemove5(file) {
      this.$refs.pictureUpload5.handleRemove(file);
      this.delFile(file);
      this.fileListReverse = [];
    },
    // 查看缩略图
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 身份证校验
    appFincerNo(idNumber) {
      let fincertNO = idNumber;
      let IDRe18 =
        /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      let IDre15 =
        /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/;
      if (IDRe18.test(fincertNO) || IDre15.test(fincertNO)) {
        //判断第18位校验值
        if (fincertNO.length == 18) {
          let charArray = Array.from(fincertNO);
          //前十七位加权因子
          let idCardWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
          //这是除以11后，可能产生的11位余数对应的验证码
          let idCardY = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
          let sum = 0;
          for (let i = 0; i < idCardWi.length; i++) {
            let current = charArray[i];
            let count = current * idCardWi[i];
            sum += count;
          }
          let idCardLast = charArray[17];
          let idCardMod = sum % 11;
          if (idCardY[idCardMod].toUpperCase() == idCardLast.toUpperCase()) {
            this.show = false;
            return true;
          } else {
            this.show = true;
            return false;
          }
        }
      } else {
        this.show = true;
        return false;
      }
    },
    // 校验护照
    checkPassport(passport) {
      var myreg = /^[a-zA-Z0-9]{3,21}$/;
      var hz = /^(P\d{7})|(G\d{8})$/;
      if (!myreg.test(passport)) {
        this.show1 = true;
        return false;
      }
      if (!hz.test(passport)) {
        this.show1 = true;
        return false;
      } else {
        return true;
      }
    },

    // 校验手机号
    appFincerPhone(phone) {
      let value = Number(phone);
      if (value == "") return (this.showPhone = true);
      if (value == NaN) return (this.showPhone = true);
      value = value.toFixed(0);
      let reg = /^1[3-9]\d{9}$/;
      if (!reg.test(value)) {
        this.showPhone = true;
      } else {
        this.showPhone = false;
      }
    },
    // 表单格式转换
    // 票面金额
    limitInput(value, name) {
      this.addform[name] =
        ("" + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || "";
    },
    //千分位格式化：10000转为10,000.00
    fmoney(s, n) {
      if (s == "" || s == null || (s == undefined) | isNaN(Number(s))) {
        return s;
      }
      s = Number(s) ? Number(s) : s;
      n = (n || n == 0) && n > -1 && n <= 20 ? n : 2;
      s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
      var l = s.split(".")[0].split("").reverse();
      var r = s.split(".")[1];
      var t = "";
      for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
      }
      if (n > 0) {
        r = "." + r;
      } else if (n == 0) {
        r = "";
      }
      let returnT = t.split("").reverse().join("") + r;
      //负数处理
      if (returnT[0] == "-" && returnT[1] == ",") {
        returnT = "-" + returnT.substring(2);
      }
      return returnT;
    },
    //千分位反格式化:10,000.00转为10000.00
    remoney(s) {
      let str = "";
      if (s) {
        str = String(s).replace(/,/g, "");
      }
      if (s && (s + "").indexOf(".") > -1 && Number(str)) {
        return String(s).replace(/[^\d\.-]/g, "");
      } else if (s && Number(str)) {
        return str;
      } else {
        return s;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}
.license-right1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  div {
    p {
      font-size: 12px;
      line-height: 24px;
    }
  }
}
.box {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 80px;
  background: #f5f7fa;
  .f1 {
    width: 100%;
    height: 138px;
    background: #f0f1f7;

    .f1_content {
      position: relative;
      margin: 0 auto;
      width: 1200px;
      height: 100%;
      .goHome {
        display: flex;
        align-items: center;
        height: 25px;
        cursor: pointer;
        z-index: 9999;
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 16px;
        font-weight: 500;
        color: #616060;
        img {
          width: 24px;
          // height: 24px;
        }
      }
      ul {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        li {
          h6 {
            font-size: 14px;
            font-weight: 400;
            color: #515151;
            margin-bottom: 5px;
            span {
              font-size: 22px;
              font-family: Britannic Bold;
              font-weight: 500;
              color: #000000;
            }
          }
          .quan {
            width: 24px;
            height: 24px;
          }
          .line {
            width: 123px;
            height: 3px;
          }
        }
      }
    }
  }
  .f2 {
    box-sizing: border-box;
    padding: 40px 80px;
    margin: 0 auto;
    width: 1200px;
    background-color: #fff;
    .content {
      box-sizing: border-box;
      padding: 30px 20px 50px 20px;
      margin: 0 auto;
      height: 100%;
      .f2_content {
        box-sizing: border-box;
        padding: 40px 57px;
      }
      .error {
        margin: 0;
        padding: 0;
        height: 15px;
        line-height: 15px;
        font-size: 12px;
        color: #f56c6c;
        position: absolute;
      }
      .title {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        font-size: 18px;
        font-weight: bold;
        color: #333333;

        h6 {
          width: 5px;
          height: 18px;
          background-color: #0a7be0;
          margin-right: 10px;
        }
      }

      // 按钮
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50px;
        .last {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          opacity: 0.3;
          border-radius: 4px;
        }
        .next {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          border-radius: 4px;
        }
        button {
          align-items: center;
          justify-content: center;
          display: flex;
          border-radius: 5px;
          width: 180px;
          height: 50px;
          color: #fff;
          margin-left: 30px;
          border: 0px;
          font-size: 16px;
          font-weight: 300;
        }
      }
    }
  }
}
// 营业执照
// 身份证正反面
.license {
  display: flex;
  margin-bottom: 20px;
  margin-left: 0;

  .aaa {
    width: 120px;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #999999;
  }

  .permit {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 212px;
    height: 120px;
    background-size: 100% 100%;
    margin-right: 15px;
    overflow: hidden;
    cursor: pointer;

    img {
      width: 212px;
      height: 100%;
    }
  }
  .permit1 {
    background: url(@/assets/flow/组77.png) no-repeat;
    background-size: cover;
  }
  .permit2 {
    background: url(@/assets/flow/组78.png) no-repeat;
    background-size: cover;
  }
  .permit3 {
    background: url(@/assets/flow/组79.png) no-repeat;
    background-size: cover;
  }

  .permit-front {
    background: url(@/assets/flow/组84.png) no-repeat;
    background-size: cover;
  }

  .permit-reverse {
    background: url(@/assets/flow/组85.png) no-repeat;
    background-size: cover;
  }

  .card {
    width: 216px;
    height: 123px;
    margin-right: 8px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .license-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    div {
      width: 100%;
      p {
        font-family: Source Han Sans SC;
        line-height: 24px;
        font-size: 12px;
        font-weight: 300;
        color: #636363;
      }
    }
  }
}

.license1 {
  .aaa11 {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    width: 130px;
    text-align: right;
    padding: 0px 14px;
  }
}

::v-deep .el-upload-list--picture .el-upload-list__item-thumbnail {
  width: 140px;
}

::v-deep .el-upload-list--picture .el-upload-list__item-name {
  display: none;
}

::v-deep .upload-demo .el-upload-list {
  display: flex;
  flex-wrap: wrap;
}

::v-deep .el-upload-list--picture .el-upload-list__item {
  width: 180px;
  margin-right: 15px;
}

::v-deep .el-select .el-input input {
  width: 100px;
  margin-left: 44px;
}
//
::v-deep .el-form-item__label {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}
::v-deep .el-form-item {
  margin-bottom: 20px;
}
::v-deep .el-form-item__error {
  font-size: 12px;
}
/* 输入框样式  */
::v-deep .el-input__inner {
  font-size: 12px;
  box-sizing: border-box;
  width: 500px;

  height: 38px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
::v-deep .el-textarea .el-textarea__inner {
  box-sizing: border-box;
  width: 500px;
  // height: 0.2031px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 8px 10px;
  color: #606266;
  outline: 0;
  font-weight: 500;
  // line-height: 0.1823px !important;
}
::v-deep .aaaa .el-input__inner {
  width: 400px;
}
::v-deep .el-upload__tip {
  font-size: 12px;
}
::v-deep .el-textarea__inner {
  &::placeholder {
    font-size: 14px;
    @media only screen and (min-width: 0px) and (max-width: 530px) {
      font-size: 12px;
    }
    font-family: "Microsoft YaHei";
  }
  @media only screen and (min-width: 0px) and (max-width: 599px) {
    padding: 0 5px;
  }
  color: #555;
  font-family: "Microsoft YaHei";
  font-size: 15px !important;
}
::v-deep .el-input__inner {
  &::placeholder {
    font-size: 14px;
    @media only screen and (min-width: 0px) and (max-width: 530px) {
      font-size: 12px;
    }
    font-family: "Microsoft YaHei";
  }
  @media only screen and (min-width: 0px) and (max-width: 599px) {
    padding: 0 5px;
    height: 34px;
  }
  color: #555;
  font-family: "Microsoft YaHei";
  font-size: 15px !important;
}
::v-deep .el-textarea {
  width: 500px;
}
</style>
<style lang="scss">
// 上传
.el-upload--picture-card {
  background-color: rgba(245, 245, 245, 0.1);
  border: 0;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 100%;
  height: 160px;
  display: flex;
  margin: 0;
  z-index: 888;
}

.el-dialog__header {
  border: 0px;
}
</style>
